<template>
	<view class="invite-poster">
		<u-popup class="share-poster" v-model="showPoster" mode="center"
			:custom-style="{background: 'rgba(0, 0, 0, 0)'}" :safe-area-inset-bottom="true" :overlay="false"
			:closeable="false" :mask-close-able="false">

			<!-- 海报图片 -->
			<image :src="path" mode="widthFix" class="poster"></image>
			<!-- #ifndef H5  -->
			<button class="save-btn br60" size="lg" @tap="saveImageToAlbum">保存到相册</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button class="save-btn br60" size="lg">长按保存到相册</button>
			<!-- #endif -->
		</u-popup>

		<!-- 生成分销海报 -->
		<drawing-poster v-if="enablePoster" :config="{
			avatar: userInfo.avatar,
			nickname: userInfo.nickname,
			code:inviteCode,
			link: link,
			qrCode: qrCode,
			poster: poster
		}" @success="handleSuccess" />
	</view>
</template>

<script>
	import {
		userShare,
		getShareMnQrcode
	} from '@/api/app'
	import config from '@/config/app'
	import {
		client,
		copy
	} from '@/utils/tools';
	import {
		mapGetters
	} from 'vuex'
	import poster from './poster.vue'
	export default {
		components: {
			"drawing-poster":poster
		},
		data() {
			return {
				path: '',
				qrCode: '',
				showPoster: true,
				enablePoster: true,
				poster: ''
			};
		},

		async created() {
			try {
				await this.getPoster()

				// #ifdef MP-WEIXIN || MP-ALIPAY
				await this.getMnpQrCode()
				// #endif

			} catch (err) {
				console.log(err)
			}

			// #ifdef APP-PLUS || H5
			this.showPoster = true
			// #endif
		},

		methods: {

			// 获取背景图
			async getPoster() {
				const res = await userShare()
				// #ifndef H5
				this.poster = res.data.mnp_user_share_bg
				// #endif
				
				// #ifdef H5
				this.poster = res.data.h5_user_share_bg
				// #endif
			},

			// 获取二维码信息
			getMnpQrCode() {
				return new Promise((resolve, reject) => {
					getShareMnQrcode({
							url: 'pages/index/index', // 跳转页面路径
							type: 0, // 0-会员分享海报 1-商品详情
							client: client, // 来源：1-微信小程序；6-支付宝生活号；7-支付宝小程序
						})
						.then((res) => {
							console.log('shareRes', res)
							// #ifdef MP-WEIXIN
							this.qrCode = res.data.qr_code.qr_code
							// #endif
							// #ifdef MP-ALIPAY
							this.qrCode = res.data.qr_code.qr_url
							// #endif

							this.showPoster = true
							resolve(res)
						})
						.catch(err => reject(err))
				})
			},

			// 保存
			saveImageToAlbum() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success: res => {
						this.$toast({
							title: "保存成功"
						});
					},
					fail: err => {
						this.$toast({
							title: '保存失败'
						});
					}
				});
				// #endif
				// #ifdef H5
				this.$toast({
					title: 请长按图片保存
				})
				// #endif
			},

			// 海报生成成功
			handleSuccess(val) {
				this.path = val
				// 关闭加载动画
				this.$emit('success', false)
			}
		},
		computed: {
			...mapGetters(['inviteCode', 'userInfo']),

			// h5生成二维码路径
			link() {
				let url = config.baseURL.replace(/\/api\//g, "/mobile/")
				console.log(url, 'config: ', config)
				return `${url}?invite_code=${this.inviteCode}`
			}
		}
	};
</script>

<style lang="scss">
	.invite-poster {
		.poster {
			width: 600rpx;
			margin: 40rpx 0;
		}

		.save-btn {
			color: #fff;
			background-color: $-color-primary;
		}
	}
</style>
